<template>
  <div>
    <h1>大文件分片上传</h1>
    <el-upload action="#" :before-upload="handleUpload">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
    <el-progress :percentage="0"></el-progress>
  </div>
</template>

<script>
import { read, getSparkHash,getChunkList } from "@/util/fileutil";
import axios from "axios";
export default {
  methods: {
    async handleUpload(arg) {
      //获取要上传文件的名称、字节数、类型
      const { name, size, type } = arg;
      //读取文件的内容
      const content = await read(arg);
      //通过spark-md5获取文件的hash值
      const hash = getSparkHash(content);
      //定义切片大小
      const chunkSize=5*1024*1024
      //调用工具方法，获取切片的数组
      const chunkList=getChunkList(arg,hash,chunkSize)
      this.$api.chunkRequest(chunkList)

      // for(let i=0;i<chunkLen;i++){
      //   const item=chunkList[i]
      //   let formData=new FormData()
      //   formData.append('chunk',item.chunk)
      //   formData.append('fileName',item.fileName)
      //   axios({
      //       method:'POST',
      //       url:'http://127.0.0.1:3000/api/upload_chunk',
      //       data:formData,
      //       headers:{
      //           'Content-Type':'multipart/form-data'
      //       }
      //   })
      // }
    },
  },
};
</script>

<style></style>
